import { ShowcasePageLayout } from '../../showcases';
// #region source
import { SfButton } from '@storefront-ui/react';

export default function ButtonVariants() {
  return (
    <>
      <div className="flex flex-col items-center space-y-4 xs:block xs:space-x-4">
        <SfButton
          variant="primary"
          blank
          className="text-white bg-neutral-700 hover:bg-neutral-800 active:bg-neutral-900"
        >
          Hello
        </SfButton>

        <SfButton
          variant="secondary"
          blank
          className="text-neutral-700 hover:text-neutral-800 active:text-neutral-900 ring-current hover:bg-neutral-100 active:bg-neutral-200"
        >
          Hello
        </SfButton>

        <SfButton
          variant="tertiary"
          blank
          className="text-neutral-500 hover:text-neutral-600 active:text-neutral-700 hover:bg-neutral-100 active:bg-neutral-200"
        >
          Hello
        </SfButton>
      </div>
      <div className="flex flex-col items-center space-y-4 xs:block xs:space-x-4">
        <SfButton
          variant="primary"
          blank
          className="text-white bg-negative-700 hover:bg-negative-800 active:bg-negative-900"
        >
          Hello
        </SfButton>

        <SfButton
          variant="secondary"
          blank
          className="text-negative-700 hover:text-negative-800 active:text-negative-900 ring-current hover:bg-negative-100 active:bg-negative-200"
        >
          Hello
        </SfButton>

        <SfButton
          variant="tertiary"
          blank
          className="text-negative-700 hover:text-negative-800 active:text-negative-900 hover:bg-negative-100 active:bg-negative-200"
        >
          Hello
        </SfButton>
      </div>
    </>
  );
}

// #endregion source
ButtonVariants.getLayout = ShowcasePageLayout;
